<template>
	<rui-card>
		<view class="lines-menu" :class="status?'fixed':''">
			<view class="lines-menu_item" :class="index==current ? 'action':''" v-for="(item, index) in menu" :key="index"
				@click="change(index)">
				<rui-icon icon="local-full" v-if="current == index" size="28"></rui-icon>
				<view class="lines-menu_item_name">{{item.name}}</view>
			</view>
		</view>
	</rui-card>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		computed
	} from "vue"
	

	let status = ref(0)
	let scroll_top = ref(0)
	
	const setScroll = e => {
		status.value = e > scroll_top.value;
	}
	
	
	const {
		ctx
	} = getCurrentInstance()

	const query = uni.createSelectorQuery().in(ctx);
	query
		.select(".lines-menu")
		.boundingClientRect((data) => {
			scroll_top.value = data.top
		}).exec();

	const change = i => {
		current.value = i
	}

	let current = ref(0)

	let menu = ref([{
		name: "亮点"
	}, {
		name: "行程"
	}, {
		name: "费用"
	}, {
		name: "须知"
	}])
	
	
	defineExpose({
		setScroll
	})
</script>

<style lang="scss" scoped>
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
	}

	.lines-menu {
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding: 25rpx 0;
		width: 100%;
		box-shadow: 0 3rpx 15rpx rgba(0, 0, 0, .06);
		z-index: 9999;
		color: #333;

		.action {
			font-weight: bold;
		}

		&_item {
			width: 25%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			&_name {
				margin-left: 5rpx;
			}
		}
	}
</style>